<template>
  <div class="map-wrap">
    <div class="mapCenter">
      <div class="opration-top">
        <p class="refrashDate">
          <span>{{mapShowName == 'china' ? '' : mapShowName }}</span>
        </p>
      </div>

      <div class="operate_btn">
        <div>
        <el-button
          title="返回上一級"
          v-if="mapShowName != 'china' && mapShowName != undefined"
          class="op_btn one" 
          size="mini" 
          @click.native="() => goBack()"
          >
          <!-- <i class="icon-fanhui1 iconfont"></i> -->
          <img src="@/assets/map-icon/fanhui.svg" alt="">
          </el-button
        >
      </div>
      <div>
        <el-button
          title="放大"
          v-if="!isFullScreen"
          class="op_btn one" 
          size="mini" 
          @click.native="() => zoomChange('add')"
          >
          <!-- <i class="icon-jia1 iconfont"></i> -->
          <img src="@/assets/map-icon/jia.svg" alt="">
          </el-button
        >
      </div>
      <div>
        <el-button
          title="缩小"
          v-if="!isFullScreen"
          class="op_btn one" 
          size="mini" 
          @click.native="() => zoomChange('reduce')"
          >
          <!-- <i class="icon-jian1 iconfont"></i> -->
          <img src="@/assets/map-icon/jian.svg" alt="">
          </el-button
        >
      </div>


      <div>
        <el-button
          title="全屏"
          v-if="!isFullScreen"
          class="op_btn two"
          size="mini"
          @click.native="() => fullScreen(true)"
          >
          <!-- <i class="icon-fangda-01 iconfont"></i> -->
          <img src="@/assets/map-icon/fangda.svg" alt="">
          </el-button
        >
        <!-- <el-button
          title="退出全屏"
          v-if="isFullScreen"
          class="op_btn three"
          size="mini"
          @click.native="() => fullScreen(false)"
          >
          <img src="@/assets/map-icon/suoxiao.svg" alt="">
          </el-button
        > -->
      </div>
      </div>
      <div class="mapdrilling-inner">
        <div ref="chart" id="chart" class="chart"></div>
      </div>
    </div>
  </div>
  <!-- <div class="mapdrilling-inner">
    <div id="chart" class="chart"></div>
  </div> -->
</template>

<script>
import "./mapChart.scss";
import * as echarts from 'echarts'
import { TAIWAN_ADCODE, JD_ADCODE, EXISTING_SECOND_LAYER_REGION, EXISTING_THIRD_LAYER_REGION } from './constant'
import { getGeoJson, getMapData } from '@/api/map'
import { getDepotList } from "@/api/mapPoint/points";
export default {
  name: 'mapChart',
  // 组件传参
  props: {
    depotId: {
      type: String,
      default: "",
    },
    // depotList: {
    //   type: Array,
    //   default: [],
    // },
    isFullScreen: {
      type: Boolean,
      default: false,
    },
  },
  data: () => {
    return {
      mapChart: null, // echarts实例
      mapStack: [], // 存储地图数据
      timer: null,
      mapShowName: '',
      currentSeriesName: '',
      currentCode: '',

      depotList: [],
      currentZoom: 1,
    }
  },
  beforeMount () {
    this.getDepotList(this.currentCode)
  },
  mounted () {
    
    console.log('重置地图')
    setTimeout(() => {
      this.initChart()
    }, 1000)
    
  },
  methods: {
    getDepotList(regionalCode) {
      getDepotList({regionalCode: regionalCode}).then(res => {
        this.depotList = []
        res.data.map(item => {
          this.depotList.push({
            name: item.name, 
            value: [item.longitude, item.latitude],
            depotId: item.id,
            depotCode: item.code, 
          })
        })
        this.mapChart && this.updateChart()
      })
    },
    updateChart() {  
      // 更新图表数据
      const option = this.mapChart.getOption();
      option.series[0].data = this.depotList
      this.mapChart.setOption(option); // 第二个参数为true表示不合并选项
    },
    // 地图放大缩小
    zoomChange(type) {
      if (type === 'add') {
        this.currentZoom = this.currentZoom + 0.1
      } else if (type === 'reduce') {
        this.currentZoom = this.currentZoom - 0.1
      }
      if (this.currentZoom < 0.8) {
        this.currentZoom = 0.8
      } else if (this.currentZoom > 2) {
        this.currentZoom = 2
      }
      let option = this.mapChart.getOption();

      option.series[0].zoom = this.currentZoom
      option.series[1].zoom = this.currentZoom
      this.mapChart.setOption({
        ...option,
        geo: {
          zoom: this.currentZoom
        }
      })






      /*
      function zoomIn() {  
          var option = myChart.getOption();  
          var currentZoom = option.geo[0].zoom || 1; // 获取当前缩放级别，默认为1  
          var newZoom = currentZoom * 1.2; // 设定放大比例，这里以1.2倍为例  
          myChart.setOption({  
              geo: [{  
                  zoom: newZoom, // 设置新的缩放级别  
                  // 其他geo配置...  
              }]  
          });  
      }
      */

    },
    // 全屏
    fullScreen(value) {
      this.$emit("fullScreen", value);
    },
    // 去到about页面
    goAbout(params) {
      let routeData = this.$router.resolve({
        path: "/about",
        query: {
          depotId: params.data.depotId,
          // depotCode: params.data.depotCode,
          // depotName: params.data.name
        }
      });
      window.open(routeData.href, "_blank");
    },
    // 在地图中添加图标高亮点
    addHighlightDepot() {
        let seriesDepot = [];
        // let depotList = []
        // this.depotList.map(item => {
        //   depotList.push({
        //     name: item.name, 
        //     value: [item.longitude, item.latitude],
        //     depotId: item.id, 
        //     depotCode: item.code, 
        //   })
        // })
          let symbolImg2 = "image://" + require("@/assets/logo.png");
  
          seriesDepot.push({
            type: "scatter", // 使用散点图系列表示标点
            coordinateSystem: "geo", // 使用地理坐标系
            data: this.depotList,
            // [
            //   // 这里的经纬度数据用于标点
            //   { name: "北京", value: [116.405285, 39.904989],depotId: 10 },
            //   { name: "上海", value: [121.473701, 31.230416],depotId: 9  },
            // ],
            symbol: symbolImg2,
            symbolSize: this.$fontSize.fontSize(0.15),
            tooltip: {
              show: true,
              trigger: 'item',
              formatter: '{b}',
              backgroundColor: '#e5570e',
              textStyle: {
                color: '#ffe4e5',
                fontSize: this.$fontSize.fontSize(0.12),
              },
            },
            // function(val) {
            //   // 可以根据数据的 value 调整标点的大小
            //   return val[2] ? val[2] * 10 : 10;
            // },
            // 可以在这里配置其他散点图系列的选项
          });
          console.log(seriesDepot, this.depotList, 'addHighlightDepot', 'kkkk')
        return seriesDepot;
      },


    // -------初始化地图相关-------------------------------------------
    async initChart () {
      // 初始化echarts实例
      this.mapChart = echarts.init(document.getElementById('chart'))
      this.addChartEvent()

      // 获取渲染地图的相关数据
      this.mapChart.showLoading()
      const mapName = 'china'
      this.mapShowName = 'china'
      this.currentCode = '000000'
      const { partData, geoJson } = await this.getGeoAndMapData('china', mapName)
      this.mapChart.hideLoading()

      // 注册渲染地图
      const specialAreas = {
        // 澳门: {
        //   left: 113,
        //   top: 20.5,
        //   width: 0.7,
        // },
        // 香港: {
        //   left: 115,
        //   top: 21.3,
        //   width: 2,
        // },
      }
      this.registeRenderMap(mapName, partData, geoJson, specialAreas)
    },

    // 添加绑定事件
    addChartEvent () {
      this.bindResizeWindow() // 监听屏幕大小改变
      this.bindClickChart() // 绑定自定义单击事件
      this.bindContextmenuChart() // 绑定自定义右击事件
    },

    // 监听屏幕大小改变
    bindResizeWindow () {
      window.addEventListener('resize', () => {
        if (this.timer) return

        this.timer = setTimeout(() => {
          this.mapChart.resize()
          this.timer = null
        }, 100)
      })
    },

    // 绑定自定义单击事件
    bindClickChart () {
      this.mapChart.on('click', async e => {
        const {
          seriesName,
          name,
          data: { adcode },
        } = e

        if (e.componentSubType == 'scatter') {
          this.goAbout(e)
          return
        }

        // 可下钻到二级地图（23个省、5个自治区、4个直辖市、2个特别行政区）
        if (EXISTING_SECOND_LAYER_REGION.find(i => i.adcode === adcode)) {
          const mapName = `${adcode}-${name}`
          this.mapShowName = name
          this.currentCode = adcode
          this.currentSeriesName = name
          this.getDepotList(adcode)
          const { partData, geoJson } = await this.getGeoAndMapData('province', mapName)
          this.registeRenderMap(mapName, partData, geoJson, {}, this.mapShowName, this.currentCode)
        }

        // 可下钻到三级地图（23个省、5个自治区 的市级区域）
        else if (EXISTING_THIRD_LAYER_REGION.find(i => `${i.adcode}-${i.name}` === seriesName)) {
          // 台湾，无法下钻（暂无市级区域geojson数据）
          if (seriesName.includes(TAIWAN_ADCODE)) return

          const mapName = `${seriesName}-${adcode}-${name}`
          this.mapShowName = `${this.currentSeriesName}-${name}`
          this.currentCode = adcode
          this.getDepotList(adcode)
          const { partData, geoJson } = await this.getGeoAndMapData('city', mapName)
          this.registeRenderMap(mapName, partData, geoJson, {}, this.mapShowName, this.currentCode)
        }
        // 调用 查看地区数据接口
        this.$emit('changeData', this.currentCode)
      })
    },

    // 绑定自定义右击事件
    bindContextmenuChart () {
      // 取消右击默认事件
      const container = document.getElementById('chart')
      container.oncontextmenu = e => e.preventDefault()
      // 绑定自定义右击事件
      this.mapChart.on('contextmenu', () => {
        this.goBack()
      })
    },

    /**
     * @description: 获取渲染地图的相关数据 geoJson 和 partData（地图部分数据内容）
     * @param {String} type 类型  china：中国地图   province：省级地图   city：市级地图
     * @param {String} mapName 地图名称 同注册地图方法registerMap 的第一个参数一致
     */
    async getGeoAndMapData (type, mapName) {
      const [{ data: geoJson }, res] = await Promise.all([getGeoJson(type, mapName), getMapData(type)])
      const { data: partData } = res.data
      return { geoJson, partData }
    },

    /**
     * @description: 返回上一级地图
     */
    goBack () {
      // 如果栈中只剩下中国地图
      console.log(this.mapStack, this.mapStack.length, this.mapStack.length <= 1, '坎坎坷坷')
      if (this.mapStack.length <= 1) {
        this.mapShowName = 'china'
        this.currentCode = null
        this.getDepotList()
        return
      }
      this.mapStack.pop()
      const { mapName, partData, geoJson, mapShowName, currentCode } = this.topChild()
      
      this.mapShowName = mapShowName
      this.currentCode = currentCode
      this.getDepotList(currentCode)

      this.registeRenderMap(mapName, partData, geoJson)
      this.$emit('changeData', this.currentCode)

      console.log(mapName, partData, geoJson, mapShowName, currentCode, 'goBack')
    },

    /**
     * @description: 地图数据入栈，栈顶成员即当前渲染的地图数据
     * @param {String} mapName 地图名称 同注册地图方法registerMap 的第一个参数一致
     * @param {Array} partData 地图部分数据内容
     * @param {Object} geoJson 地图geoJson
     */
    pushStack (mapName, partData, geoJson, mapShowName, currentCode) {
      this.mapStack.push({
        mapName,
        partData,
        geoJson,
        mapShowName,
        currentCode
      })
    },

    /**
     * @description: 获取栈顶成员
     */
    topChild () {
      if (this.mapStack.length === 0) return undefined
      return this.mapStack[this.mapStack.length - 1]
    },

    /**
     * @description: 注册渲染地图
     * @param {String} mapName 地图名称 同 option/series/map 一致
     * @param {Array} partData 地图部分数据内容
     * @param {Object} geoJson 地图geoJson
     * @param {Object} specialAreas 特殊区域
     */
    registeRenderMap (mapName, partData, geoJson, specialAreas = {}, mapShowName, currentCode) {
      console.log(mapName, partData, geoJson, mapShowName, currentCode,'注册渲染地图')
      // 注册地图
      echarts.registerMap(mapName, geoJson, specialAreas)
      // 绘制地图
      this.renderMap(mapName, partData, geoJson, mapShowName, currentCode)
    },

    /**
     * @description: 绘制地图
     * @param {String} mapName 地图名称 同注册地图方法registerMap 的第一个参数一致
     * @param {Array} partData 地图部分数据内容
     * @param {Object} geoJson 地图geoJson
     */
    renderMap (mapName, partData, geoJson, mapShowName, currentCode) {
      const seriesData = this.getSeriesDataByPart(partData, geoJson)
      const visualMapMax = this.getVisualMapMax(seriesData)
      let initialCenter = [108, 31.8]; // 经度, 纬度 
      const option = {
        title: {
          show: false,
          text: mapName,
          textStyle: {
            color: '#b7def9',
            fontSize: 16,
          },
        },
        tooltip: {
          show: false,
          trigger: 'item',
          formatter: '{b}<br/>{c}',
          backgroundColor: '#de5e60',
          textStyle: {
            color: '#ffe4e5',
            fontSize: 12,
          },
        },
        // // 视觉映射
        // visualMap: {
        //   min: 0,
        //   max: visualMapMax,
        //   text: ['高', '低'],
        //   realtime: true,
        //   calculable: true,
        //   inRange: {
        //     color: ['#70add9', '#549ccb', '#297bb4'], // 色阶范围
        //   },
        //   textStyle: {
        //     color: '#b7def9',
        //   },
        // },
        geo: {
          type: "map",
          map: mapName,
          zoom: 1.1,
          scaleLimit: {
            min: 0.8,
            max: 2,
          },
          itemStyle: {
            // 非高亮状态下的地图块样式
            normal: {
              areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
              borderColor: "#EBEBE4", //#EBEBE4灰色
              borderWidth: 0.5
            },
            // 高亮状态下的地图块样式
            emphasis: {
              areaColor: "rgba(43, 196, 243, 0.42)"
            },
          },
          // center: initialCenter,
          // label: {
          //   // label 设置文本标签的显示格式，去掉不影响显示地图
          //   normal: {
          //     show: false,
          //     color: "#000000",
          //     show: true, //省份名称
          //   },
          // },
          // roam: true, // 开启缩放和平移
          // itemStyle: {
          //     normal: {
          //       areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
          //       borderColor: "#EBEBE4", //#EBEBE4灰色
          //       borderWidth: 0.5,
          //     },
          //     emphasis: {
          //       areaColor: "rgba(43, 196, 243, 0.42)", //s鼠标放上去，地图块高亮显示的颜色
          //     },
          //   },
            
        },
        series: [
          ...this.addHighlightDepot(),
          {
            name: mapName, // 系列名称
            type: 'map',
            map: mapName, // 同 registerMap 方法的第一个参数一致
            zoom: 1.1, // 当前视角的缩放比例
            // zlevel: 1, // 用于 Canvas 分层，不同zlevel值的图形会放置在不同的 Canvas 中
            scaleLimit: {
              min: 0.8,
              max: 2,
            },
            // center: initialCenter,
            label: {
              // 非高亮状态下的文本样式
              normal: {
                show: true,// 是否展示图例
                position: 'inside', // 文本标签显示的位置
                textStyle: {
                  color: '#ccc', // 文本颜色
                  fontSize: 9,
                },
                // formatter: '{b}\n{c}', // 文本上显示的值  data:[{name: "地名", value: 数据}],  {b}表示label信息,{c}代表value
              },
              // 高亮状态下的文本样式
              emphasis: {
                textStyle: {
                  color: '#333', // 文本颜色
                },
              },
            },
            itemStyle: {
              // 非高亮状态下的地图块样式
              normal: {
                areaColor: "#5ab1ef", //地图块颜色#DCE2F1  浅蓝#2B91B7
                borderColor: "#EBEBE4", //#EBEBE4灰色
                borderWidth: 0.5
              },
              // 高亮状态下的地图块样式
              emphasis: {
                areaColor: "rgba(43, 196, 243, 0.42)"
              },
            },
            data: seriesData,
          },
        ],
        animation: true,
        animationDuration: 1000,
        animationDurationUpdate: 600,
        animationEasingUpdate: 'cubicInOut',
      }

      // 绘制图表
      this.mapChart.setOption(option)

      // 如果渲染的地图 和 栈顶地图一致，无需入栈
      if (this.topChild() && mapName === this.topChild().mapName) {
        return
      }

      console.log(mapShowName, 'mapShowNamemapShowName')
      // 入栈
      this.pushStack(mapName, partData, geoJson, mapShowName, currentCode)
    },

    /**
     * @description: 根据partData 和 geoJson 生成 seriesData
     * @param {Array} partData 地图部分数据内容
     * @param {Object} geoJson 地图geoJson
     */
    getSeriesDataByPart (partData, geoJson) {
      let data = geoJson.features.map(({ properties }) => ({
        adcode: properties.adcode,
        name: properties.name,
        value: 0,
      }))
      if (geoJson.attach) {
        const attachData = geoJson.attach.map(item => ({
          adcode: item.adcode,
          name: item.name,
          value: 0,
        }))
        data.push(...attachData)
      }
      // 过滤掉九段线数据
      data = data.filter(item => item.adcode !== JD_ADCODE)

      data.forEach(item => {
        const currData = partData.find(i => i.adcode === item.adcode)
        if (currData) {
          item.value = currData.value
        }
      })
      return data
    },

    /**
     * @description: 根据seriesData 动态计算生成 visualMap 的最大值
     * @param {Array} seriesData 地图数据内容
     */
    getVisualMapMax (seriesData) {
      const maxValue = Math.max(...seriesData.map(item => item.value))
      return parseInt(maxValue) + 50
    },
    // ------end-----初始化地图相关---------------------------



  },

  beforeUnmount () {
    // 销毁地图实例
    this.mapChart.dispose()
  },
}
</script>

<style scoped lang="scss">
.mapdrilling-inner {
 // display: flex;
 // justify-content: center;
  //align-items: center;
  width: 100%;
  height: 88%;
  margin: 0px auto 0;
    overflow: hidden;
  .chart {
    width: 96%;
    margin: 0 auto;
    height: 100%;
    // border-radius: 8px;
  }
}

.mapCenter {
  position: relative;

  .operate_btn {
    position: absolute;
    bottom: 0.6rem;
    right: 0.5rem;
    z-index: 100000;

  .op_btn {
    color: #c6cde9;
    background-color: rgba(172, 178, 238, 0.1);
    border-color: #2fdfffff;
    
    margin: 0 0 10px 0;
    padding: 4px;
    i {
      font-size: 0.25rem !important;
    }
    img {
      width: 0.25rem;
      height: 0.25rem;
    }
  }

  .op_btn:hover {
    background-color: #014ea1ff;
    color: #fff;
  }


  }
  
}
</style>
